

var webpack = require('webpack');//引入webpack
var path = require('path');//引入nodejs的path模块,主要为获取文件及其路径 然后方便操作
var glob = require('glob');//引入nodejs的glob模块,获取目标路径下的所有文件
var HtmlWebpackPlugin = require('html-webpack-plugin');//引入webpack插件 主要是生成html文件,我们这里主要用来把我们的html文件打包
var ExtractTextPlugin = require("extract-text-webpack-plugin");//这个webpack插件主要用来将js文件中的require的css分离打包
var CopyWebpackPlugin = require('copy-webpack-plugin');//这个webpack插件主要用来拷贝文件,可惜拷贝的时候没有办法压缩,一大遗憾
var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');//这个webpack插件主要用来合并js文件 我们如果写了很多vue插件的文件 可以合并为一个文件啊
var CleanWebpackPlugin = require('clean-webpack-plugin');//打包前删除文件
var ROOT_PATH = path.resolve(__dirname);//根目录 package的pretest在执行test前自动执行：http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html
var ClassicModePath = "assets/js/";//表示js的文件路径

var entryFile = getEntry('./src/module/**/**/*.html');
var _htmls = entryFile.htmlEntries;//获取当前目录指定的html文件--mac上面后面的src\\改成src/
var _entry = entryFile.jsEntries;//获取当前目录指定的js文件--mac上面后面的src\\改成src/
var _plugin  = getAllHTML(_htmls);//将html文件存放到HtmlWebpackPlugin数组中
addVendarJs(_entry);//添加通用js

 module.exports = {
    entry: _entry,//入口文件
    output: {
        path: path.resolve(__dirname, './dist'),//这个是指定打包路径的
        publicPath: '',//这个目前我的用法是指定在html引入资源的时候设置路径的前面
        filename: '[name].[hash].js',//这个是打包的时候这是名称
        chunkFilename: '[id].[chunkhash].js'//这个我也不晓得
    },
    resolve: {
        extensions: ['.js', '.vue'],//这个就是设置webpack识别哪些后缀名 因为我设置了.vue他才识别了我以.vue为后缀名的vue组件
        alias: {  'vue': 'vue/dist/vue.js'}//这个是别名 因为好像你不这样写 最后transition template这些vue的自己的组件都用不了 https://segmentfault.com/a/1190000006435886
    },
    module: {
        rules: [
            {
              test: /\.vue$/,
              use: [{
                loader: "vue-loader",
                options: {
                  loaders: {
                    css: ExtractTextPlugin.extract({
                      loader: 'css-loader',
                      fallbackLoader: 'vue-style-loader' // <- this is a dep of vue-loader, so no need to explicitly install if using npm3
                    })
                  }
                }
              }],
            },
            {
              test: /\.css$/,
              use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader",
                publicPath:"/assets/css/"
              })
            },
            {
              test: /\.(png|jpg|gif)$/,
              use: [{
                loader: 'url-loader?limit=8192&name=assets/image/[name].[hash:8].[ext]'
              }],
            },
            {
              test: /\.(woff|svg|eot|ttf)\??.*$/,
              use: [{
                loader: "url-loader"
              }],
            },
            {
              test: /\.js$/,
              use: 'babel-loader',
              exclude: /node_modules/
            }
        ]
    },
    plugins: _plugin
}

//获取指定文件夹下所有指js和html
function getEntry(globPath) {
    var files = glob.sync(globPath);//模糊匹配指定路径下的指定文件
    var entries = {},htmlEntrys = {},
        entry, dirname, basename, pathname, extname;
    for (var i = 0; i < files.length; i++) {
        entry = files[i];
        dirname = path.dirname(entry);//返回路径中代表文件夹的部分
        extname = path.extname(entry);//返回路径中文件的后缀名
        basename = path.basename(entry, extname);//返回路径中的最后一部分,extname表示把extname替换掉, 这里本意就是获取到文件名作为key
        pathname = ClassicModePath + basename;
        //遍历整理html文件
        htmlEntrys[pathname] = files[i];
        //遍历整理js文件
        var jsFiles = glob.sync('./src/module/**/'+basename+'.js');//模糊匹配指定路径下的指定文件
        if(jsFiles.length > 0){
          entries[pathname] = jsFiles[0];
        }
    }
    return {"jsEntries":entries,"htmlEntries":htmlEntrys};
}
//生成Plugin插件数组
function getAllHTML(htmlARR){
  var _Plugin = [];
  for (var key in htmlARR) {
      var newHtmlPath = key.substring(key.lastIndexOf("/")+1,key.length);
      console.log(_htmls[key]);
      _Plugin.push(new HtmlWebpackPlugin({
        title:"zhuwei",
        filename: newHtmlPath + '.html',//这里面的key是哪里来的呢 是htmlARR的key,htmlARR的key是对应的每一个html文件的路径 他其实和js路径是一样的（在我们的项目中,我们把业务html文件和业务js放在同一个文件夹里）
        template: 'html-withimg-loader!' + _htmls[key],//参照html模板是
        inject: true,//true | 'head' | 'body' | false  ,注入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。
        chunks: [key,'common','vendar']//允许只添加某些块 对应entry那边指定的那些模块
      }))
  }
  //添加其他插件
  _Plugin.push(
    new webpack.DefinePlugin({
      'process.env': false
    }),
    new CommonsChunkPlugin({//这个的用法是将js文件中所有的共用js提取出来 看这个：http://blog.csdn.net/github_26672553/article/details/52280655 你选择哪些js文件他就把哪些js文件的公共部分提取出来
      name: ["common","vendar"],
      filename:'assets/js/[name].[hash].js',
      minChunks:2
    }),
    new CleanWebpackPlugin(['dist'],{
        root:ROOT_PATH,
        verbose: true,
        dry: false
    }),
    new webpack.optimize.UglifyJsPlugin({
        // 最紧凑的输出
        beautify: false,
        // 删除所有的注释
        comments: true,
        compress: {
          // 在UglifyJs删除没有用到的代码时不输出警告
          warnings: false,
          // 删除所有的 `console` 语句
          // 还可以兼容ie浏览器
          drop_console: true,
          // 内嵌定义了但是只用到一次的变量
          collapse_vars: true,
          // 提取出出现多次但是没有定义成变量去引用的静态值
          reduce_vars: true,
        }
    }),//压缩啊
    new ExtractTextPlugin({//分离css
      filename:  (getPath) => {
        return getPath('[name].[hash].css').replace('js', 'css');
      }
    }),
    new CopyWebpackPlugin([{from: __dirname + '/src/assets/css/base.css',to: __dirname + '/dist/assets/css/base.css'}]),//这个是拷贝,我写了一个base.css 我把它从页面引入 这样我需要拷贝
    new CopyWebpackPlugin([{from: __dirname + '/src/assets/fonts',to: __dirname + '/dist/assets/fonts'}]),
    new CopyWebpackPlugin([{from: __dirname + '/src/assets/css/bootstrap.min.css',to: __dirname + '/dist/assets/css/bootstrap.min.css'}]),
    new CopyWebpackPlugin([{from: __dirname + '/src/assets/css/font-awesome.min.css',to: __dirname + '/dist/assets/css/font-awesome.min.css'}])
  );
  return _Plugin;
}
//添加通用js
function addVendarJs(jsArr){
  jsArr['vendar'] = ['vue'];//这个的目的是 分离打包vue啊,至于原理的话请看 http://www.cnblogs.com/jaycewu/p/6010872.html 第五个
}
